<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" th:href="@{static/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
		<script src="../js/jquery-1.9.1.min.js" th:src="@{static/js/jquery-1.9.1.min.js}"></script>

		<link rel="stylesheet" href="invite_files/base.css" th:href="@{static/pages/invite_files/base.css}" />

		<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css" th:href="@{static/font-awesome-4.7.0/css/font-awesome.css}" />
		<link rel="stylesheet" href="invite_files/frontsearch.css" th:href="@{static/pages/invite_files/frontsearch.css}"/>
		<link rel="stylesheet" href="invite_files/index.css" th:href="@{static/pages/invite_files/index.css}"/>
		<link rel="stylesheet" href="invite_files/invite.css" th:href="@{static/pages/invite_files/invite.css}"/>

		<link rel="stylesheet" href="invite_files/sets.css" th:href="@{static/pages/invite_files/sets.css}"/>
		<link rel="stylesheet" href="invite_files/sets.min.css" th:href="@{static/pages/invite_files/sets.min.css}"/>

		<link href="../../static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" media="screen" th:href="@{static/bootstrap-3.3.7-dist/css/bootstrap.css}"/>
		<link href="../../static/bootstrap-3.3.7-dist/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" th:href="@{static/bootstrap-3.3.7-dist/css/bootstrap-datetimepicker.min.css}"/>
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js" th:src="@{static/js/jquery-1.9.1.min.js}"></script>
		<script type="text/javascript" src="../../static/bootstrap-3.3.7-dist/js/bootstrap.min.js" th:src="@{static/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
		<script type="text/javascript" src="../../static/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.js" charset="UTF-8" th:src="@{static/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.js}"></script>
		<script type="text/javascript" src="../../static/bootstrap-3.3.7-dist/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8" th:src="@{static/bootstrap-3.3.7-dist/js/locales/bootstrap-datetimepicker.fr.js}"></script>
	
		<link rel="stylesheet" href="../css/res/layui/css/layui.css" th:href="@{static/css/res/layui/css/layui.css}" media="all">
  		<script src="../layuiadmin/layui/layui.js" th:src="@{static/layuiadmin/layui/layui.js}"></script>
		<script type="text/javascript" src="../js/template.js" th:src="@{static/js/template.js}"></script>
		<script src="../js/ban.js" th:src="@{static/js/ban.js}"></script>
		<style>
		    body {
		      height: 100%;
		      overflow: hidden;
		    }
		
		    canvas {
		      z-index: 0;
		      position: absolute;
		    }
		 </style>
		
	</head>
	<body>
		<canvas></canvas>
		<div class="main-wrapper" style="box-shadow: 5px 5px 5px  #000000; border-radius:60px;" >
            <div class="invite-part" >
            	<br />
                <h4>考试设置</h4>
                
                <ul class="indent invite-advanced-setting-wrapper mt10 mb10">
                	<li>
                        <form class="form-inline">
                            <div class="email-date-period inline-block" data-link="data-original-title{:grouped?'高级考试录入时间以考试设置时间为准，不可更改':''}" data-original-title=""><script type="jsv#34_"></script>
								<div class="search-comp">
									<div class="form-group begin-date has-feedback">
										
										<!--<input data-link="beginDate" class="form-control date-picker" type="text" placeholder="开始时间" readonly="" style="width: 160px;">-->
											<div class="form-group">
												<label class="control-label" for="beginDate">考试时间从</label>
								                <div class="input-group date form_datetime " data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link="beginDate" data-link-field="dtp_input1">
								                    <input id="begintime" class="form-control" size="12" placeholder="开始时间"  type="text" value="" readonly>
								                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove" ></span></span>
								                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
								                </div>
				                				<input type="hidden" id="dtp_input1" value="" /><br/>
			     					 		</div>
									</div>
									<div class="form-group end-date has-feedback">
										<label class="control-label" for="endDate">至</label>
										<div class="form-group">
								                <div class="input-group date form_datetime " data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link="beginDate" data-link-field="dtp_input1">
								                    <input id="endtime" class="form-control" size="12" placeholder="结束时间"  type="text" value="" readonly>
								                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove" ></span></span>
								                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
								                </div>
				                				<input type="hidden" id="dtp_input1" value="" /><br/>
			     					 		</div>
									</div>
								</div>
								<script type="jsv/34_"></script>
                            </div>
                            
                        </form>
                    </li>
                    <!--<li>-->
                    	<!--<script type="jsv#101^"></script><script type="jsv#21_"></script>
                    	<label class="check-box inline-block" data-link="class{merge:proctorCamera toggle='active'} class{merge:false toggle='check-box-disabled'}">
                    	<span class="fa-stack check-icon"> <i class="fa fa-square-o fa-stack-2x"></i>
                    		<i class="fa fa-check-square fa-stack-1x check"></i></span> <script type="jsv#100^">
                    	</script>启用摄像头监控<script type="jsv/100^"></script>-->
                    <!--</label><script type="jsv/21_"></script>-->
                   <!-- <script type="jsv/101^"></script>
                    </li>-->
                    <br />
                    <li>
                        <form class="form-inline" role="form"><script type="jsv#103^"></script><script type="jsv#22_"></script><label class="check-box inline-block active" data-link="class{merge:switchLimitSwitcher toggle='active'} class{merge:false toggle='check-box-disabled'}">
                        	<span class="fa-stack check-icon"> 
                        		<i class="fa fa-square-o fa-stack-2x"></i>
                        		<i class="fa fa-check-square fa-stack-1x check"></i>
                        	</span> 页面切换次数超过</label>
                            <div class="form-group"><input id="cheattimes" type="text" class="form-control tc" style="width:80px;" placeholder="次数" data-link="{:switchLimit:} disabled{:!switchLimitSwitcher}">
                            </div>
                            	次时终止测试
                        </form>
                    </li></ul>
            </div>
            <div class="invite-part h80">
            	<br />
                <h4>通知考生</h4>
                <form class="indent send-type-wrapper mt10">
                    <div class="toggle-wrapper disabled" data-link="class{merge:!sendEmail toggle='disabled'}">
                        	给考生发送邮件：
                        <label  class="toggle email-hint" data-toggle="tooltip" data-placement="right">
                            <input type="checkbox" data-link="{:sendEmail:} disabled{:!emailEnabled}">
                            <span id="sendemail" class="handle"></span>
                        </label>
                    </div>
                    <div class="toggle-wrapper disabled" data-link="class{merge:!sendMessage toggle='disabled'}">
                        <label class="control-label toggle-label">给考生发送短信：</label>
                        <label class="toggle message-hint" data-toggle="tooltip" data-placement="right" data-original-title="" title="">
                            <input type="checkbox" data-link="{:sendMessage:} disabled{:!messageEnabled}" disabled="disabled">
                            <span class="handle"></span>
                        </label>
                    </div>
                </form>
            </div>
            <div class="invite-part">
            	<br />
                <h4>录入考生</h4>
                <div class="indent invite-wrapper mt10">
                    <ul class="nav nav-tabs nav-justified"><li class="single active"><a href="#inviteCandiDateSingleImport" data-toggle="tab">单个录入</a></li><li class="multi"><a href="#inviteCandiDateMultiImport" data-toggle="tab">批量录入</a></li></ul>
                    <div class="tab-content p0">
                        <div class="tab-pane fade active in" id="inviteCandiDateSingleImport">
                            <script type="jsv#23_"></script>
						    <table class=""  style="border-collapse:separate; border-spacing:0px 20px;">
						    	<br />
						    	<tbody>
						    		<tr>
						    			<td style="width:10%;"><span><i class="fa fa-user fa-fw"></i> 姓名</span></td>
						    			<td><input type="text" id="s_name" class="form-control tl" placeholder="考生的姓名" data-link="{:candidateName:trim} disabled{:isSending}">
						    			</td>
						    		</tr>
						    		
						    		<tr>
						    			<td style="width:10%;"><span><i class="fa fa-envelope-o fa-fw"></i><script type="jsv#104^">
						    				
						    			</script>邮箱<script type="jsv/104^"></script></span></td><td><input type="text" id="s_email" class="form-control tl" placeholder="考生的邮箱" data-link="{:candidateUid:trim} placeholder{:'考生的' + uidName} disabled{:isSending}"></td></tr>
						    			<tr data-link="css-display{:sendMessage&amp;&amp;!isUidPhone?'table-row':'none'}" style="display: none;"><td style="width:1%;">
						    				<span><i class="fa fa-phone"></i> 手机号码</span></td><td><input type="text" class="form-control" placeholder="手机号码（11位）" data-link="{:phone:trim} disabled{:isSending}"></td></tr>
						    				<tr><td style="width:1%;"></td><td>
						    					<a id="enter" class="btn btn-primary btn-invite" data-link="disabled{:isSending}">
						                	录入并通知
						                	
						            </a></td></tr>
						    	</tbody>
						    </table>
						    <ul id='InformedList' class="list-group invite-list mt20" data-link="visible{: list^length}" data-jsv-df="" style="display: block;">
					    	<li id='listGroup' class='list-group-item' data-link=''>
					    		<span class='badge badge-success'>😏</span>已录入通知列表 
					    	</li>
					        
					        <!--<li class="list-group-item reciever-info">
					            <span class="name">123123</span>
					            <span class="email">123@qq.com</span>
					        </li>
					        -->
						    </ul>
							    
                        </div>
                        <div class="tab-pane fade" id="inviteCandiDateMultiImport">
							<script type="jsv#26_"></script>
							    <div class="alert alert-warning mt15">
							        <!--	<h4 style="font-weight:normal;">批量导入考生</h4>-->
							        <p>重要提示：</p>
							        <ul style="padding-left: 20px;"><li style="list-style: unset;">如果有多个考生，您可以先<a href="http://101test-public.oss-cn-beijing.aliyuncs.com/template/xls/invitation.xls" class="text-primary">下载模板</a>输入后再导入。</li><li style="list-style: unset;">建议每个模板不要超过500人，如考生数量多，可拆分多个模板分批次导入。</li><li data-link="visible{:sendEmail}" style="list-style: unset; display: none;">免费用户每日可批量发送邀请1000次，vip用户每日可批量发送邀请3000次，企业版用户每日可批量发送邀请5000次。如有特殊需求请联系我们 010-82167778。</li></ul>
							    </div>
							    
							    <form method="post" action="" enctype="multipart/form-data" id="fileform">
								    <input id="the_file" type="file" name="file"><br>
								    <!--<span id="ajaxsubmit" class="uploadText">-->
								    <input type="button" id="ajaxsubmit" value="提交">
								   <!-- </span>-->
								</form>
								
								<ul id='InformedList1' class="list-group invite-list mt20" data-link="visible{: list^length}" data-jsv-df="" style="display: block;">
						    	<li id='listGroup1' class='list-group-item' data-link=''>
						    		<span class='badge badge-success'>😏</span>已录入通知列表 
						    	</li>

							    </ul>

							    <div class="mt10 multi-import-wrapper" style="display: none; border: 1px solid red;">导入文件</div><div class="upload-error-log"></div>
							    <div class="mt10 alert alert-danger multi-import-alert" data-link="visible{:errorMsg}" style="display: none;">
							        <p><script type="jsv#109^"></script><script type="jsv/109^"></script></p>
							        <p data-link="visible{:errorFileName}" style="display: none;">请下载包含了错误信息的文件，修改后重新导入</p>
							        <p data-link="visible{:errorFileName}" style="display: none;">
							            <a class="btn btn-danger" data-link="href{:'frame/download/' + errorFileName}" href="frame/download/undefined">下载错误文件</a><span class="pl5">小提示：本次导入并未发送任何邮件</span>
							        </p>
							    </div>
							    <div class="max-invite" data-link="visible{:surplusInvites <= 0 &amp;&amp; sendEmail}" style="display: none;">您今天的批量邀请次数已达到上限，请使用单个录入方式或明天在使用批量导入功能。</div>
							    <span data-link="visible{:sendEmail}" style="position: absolute; top: 158px; left: 190px; display: none;">剩余: <script type="jsv#110^"></script>1000<script type="jsv/110^"></script>次</span>
							<script type="jsv/26_"></script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" class="paper_id" id="paper_id" th:value="${paper_id}">
         <input type="hidden" id="teacher_id" th:value="${session.uid}">
	</body>
	<script type="text/html" id="template1">
	{{each informedList as student}}	
		<li class="list-group-item reciever-info">
	        <span class="name">{{student.name}}</span>
	        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	        <span class="email">{{student.email}}</span>
	    </li>
	{{/each}}
	</script>
	<script type="text/javascript" th:inline="javascript">
		//比较两个日期的大小
		function CompareDate(d1,d2)
		{
		  return ((new Date(d1.replace(/-/g,"\/"))) > (new Date(d2.replace(/-/g,"\/"))));
		}
		//获得URL中的参数方法
		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return decodeURI(r[2]);
			return null;
		}
		$(function(){
			//datetimepicker初始化
			$('.form_datetime').datetimepicker({
			    weekStart: 0, //一周从哪一天开始
			    todayBtn:  1, //
			    autoclose: 1,
			    todayHighlight: 1,
			    startView: 2,
			    forceParse: 0,
			    showMeridian: 1
			});
		})
		
		//在批量导入excel模板后显示通知列表到前台
		$(function(){
			$("#ajaxsubmit").click(function(){
				//alert(233);
				var begintime = $('#begintime').val();
				var endtime = $('#endtime').val();
				var cheattimes = $('#cheattimes').val();
				var teacher_id = $('#teacher_id').val();//注意script标签加th:,var teacher_id=[[${session.teacherid}]]; 后台sesson的key=teacherid
				var paper_id = GetQueryString("paper_id");
				//alert(CompareDate(endtime,begintime));
				if(begintime==""||endtime=="")
				{
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('考试时间不能为空！');
					});
					return;
				}
				if(!CompareDate(endtime,begintime))
				{
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('非法的考试时间段！');
					});
					return;
				}
				if(cheattimes=="")
				{
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('作弊次数不能为空！');
					});
					return;
				}
				
				
				//判断是否需要通过邮件进行批量通知
				var informflag;
				if($("#sendemail").prev().is(":checked")){
					informflag=1;//需要通过邮件进行批量通知
				}
				else
				{
					informflag=0;
				}
				var filedata = new FormData();
				var file = $("#the_file")[0].files[0];
				if(file!="")
				{
					filedata.append("file",file);
				}
				filedata.append("begintime",begintime);
				filedata.append("endtime",endtime);
				filedata.append("cheattimes",cheattimes);
				filedata.append("teacherid",teacher_id);
				filedata.append("paperid",paper_id);
				filedata.append("informflag",informflag);
				layui.use(['layer', 'form'], function(){
			  		var layer = layui.layer
			  			,form = layui.form;
			  			layer.msg('批量通知成功！');
				});
				//var a = {'file':data};
				$.ajax({
				url:'/importexcel2',
				type:'post',
				async:true,
				processData:false,
				contentType:false,
				data:filedata,
				success:function(e){
					var obj = JSON.parse(e);//将字符串转换成json对象
					var new_html= template("template1",obj);//将json对象绑定到artTemplate模板上
					$('#listGroup1').append(new_html);
					
				},
						error:function(e){
							console.log(e);
							layui.use(['layer', 'form'], function(){
						  		var layer = layui.layer
						  			,form = layui.form;
						  			layer.msg('发送邮件出错了，可能是邮箱未注册！');
							});
						}
				});
			})
		})
		
		//点击单个录入，可通过邮件添加考生
		$(function(){
			$('#enter').click(function(){
				var sname = $('#s_name').val();
				var semail = $('#s_email').val();
				var begintime = $('#begintime').val();
				var endtime = $('#endtime').val();
				var cheattimes = $('#cheattimes').val();
				var teacher_id = $('#teacher_id').val();//注意script标签加th:,var teacher_id=[[${session.teacherid}]]; 后台sesson的key=teacherid
				var paper_id = GetQueryString("paper_id");
				//alert(CompareDate(endtime,begintime));
				var pararms ={"name":sname,
							  "email":semail,
							  "begintime":begintime,
							  "endtime":endtime,
							  "cheattimes":cheattimes,
							  "teacherid":teacher_id,
							  "paperid":paper_id
				};// 定义一个js对象
				if(begintime==""||endtime=="")
				{
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('考试时间不能为空！');
					});
					return;
				}
				if(!CompareDate(endtime,begintime))
				{
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('非法的考试时间段！');
					});
					return;
				}
				if(cheattimes=="")
				{
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('作弊次数不能为空！');
					});
					return;
				}
				if(sname==""||semail=="")
				{
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('考生信息不能为空！');
					});
					return;
				}
				
				if($("#sendemail").prev().is(":checked")){
			        $.ajax({
						url:'sendEmail',
						type:'post',
						contentType:'application/json;charset=UTF-8',//request请求的类型是json类型,字符编码是utf-8
						data:JSON.stringify(pararms),//将json对象转换成字符串,再向后台传递
						success:function(e){//e变量就是后台返回的Map对象
							//alert("回来了");
							layui.use(['layer', 'form'], function(){
						  		var layer = layui.layer
						  			,form = layui.form;
						  			layer.msg('已通过邮件通知对方！');
							});
							var $headList=$("<li id='listGroup' class='list-group-item' data-link=''><span class='badge badge-success'>"+
						    	"</span>已录入列表" +
					        "</li>"
					        );
							var $informedList=$("<li class='list-group-item reciever-info'>"+
						            "<span class='name'>"+sname+"</span>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
						            "<span class='email'>"+semail+"</span>"+
						        "</li>")
					        //$('#InformedList').html($headList);
							$('#listGroup').append($informedList);
						},
						error:function(e){
							console.log(e);
							layui.use(['layer', 'form'], function(){
						  		var layer = layui.layer
						  			,form = layui.form;
						  			layer.msg('发送邮件出错了，可能是邮箱未注册！');
							});
						}
					});
			   	}else{
					//alert("hidden");
					var $informedList=$("<li class='list-group-item reciever-info'>"+
				            "<span class='name'>"+sname+"</span>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
				            "<span class='email'>"+semail+"</span>"+
				        "</li>")

					$.ajax({
			        	type:"post",
			        	url:"informOne",
			        	async:true,
			        	contentType:'application/json;charset=UTF-8',//request请求的类型是json类型,字符编码是utf-8
						data:JSON.stringify(pararms),//将json对象转换成字符串,再向后台传递
						success:function(e){
							$('#listGroup').append($informedList);
							layui.use(['layer', 'form'], function(){
						  		var layer = layui.layer
						  			,form = layui.form;
						  			layer.msg('已向对方发送消息！');
							});
						},
						error:function(e){
							console.log(e);
							layui.use(['layer', 'form'], function(){
						  		var layer = layui.layer
						  			,form = layui.form;
						  			layer.msg('发送邮件出错了，可能是邮箱未注册！');
							});
						}
			        });
			        
					
			   	}
			})
			
		})
	
	</script>
	
</html>

